﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/myorder.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<style>
			.myOrder-favourate-div1 {
				width: 250px;
				/*height: 364px;*/
				border: 1px lightgray solid;
				box-shadow: 0 0 20px lightgray;
				margin-top: 30px;
				
			}
			
			.myOrder-favourate-img img {
				width: 250px;
				height: 250px;
				margin-bottom: 10px;
			}
			
			.myOrder-favourate-price {
				text-align: center;
				color: #e73d4d;
				font-size: 18px;
				margin-top: 280px;
				text-align: center;
			}
			
			.myOrder-favourate-name {
				font-size: 14px;
				text-align: center;
			}
			
			.myOrder-favourate-botnbox {
				width: 190px;
				height: 25px;
				display: flex;
				justify-content: space-between;
				margin: 10px auto;
				opacity: 0;
				
			}
			
			.myOrder-favourate-delete {
				width: 91px;
				height: 25px;
				text-align: center;
				line-height: 25px;
				font-size: 12px;
				border: 1px #D3D3D3 solid;
				color: #D3D3D3;
				cursor: pointer;
			}
			
			.myOrder-favourate-look {
				width: 91px;
				height: 25px;
				text-align: center;
				line-height: 25px;
				font-size: 12px;
				border: 1px #D3D3D3 solid;
				color: #FFFFFF;
				cursor: pointer;
				background: #DF1F26;
			}
			
			.myOrder-favourate-look a {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			.myOrder-favourate-div1:hover .myOrder-favourate-botnbox {
				opacity: 1;
			}
			
			.myOrder-favourate-oldprice {
				text-decoration: line-through;
				color: grey;
				font-size: 14px;
				margin-left: 5px;
			}
			
			.myOrder-favourate-unitprice {
				text-align: center;
				color: red;
			}
			
			.myOrder-favourate {
				display: flex;
				flex-wrap: wrap;
			}
		</style>
	</head>

	<body>
		<div class="myOrderGrey">
			<div class="myOrderGrey-main">
				<div class="myOrder-leftSide">
					<div class="myOrder-leftSide-Title">我的暴风商城</div>
					<div class="myOrder-leftSide-center">
						<ul class="myOrder-leftSide-center-list">
							<li class="myOrder-leftSide-center-list-title">订单中心</li>
							<li class="myOrder">
								<a href="">我的订单</a>
							</li>
							<li>
								<a href=""> 暴风影音VIP订单 </a>
							</li>
							<li>
								<a href=""> 暴风影音影视会员订单</a>
							</li>
							<li>
								<a href=""> 众筹订单</a>
							</li>
							<li>
								<a href=""> 魔镜商城历史订单</a>
							</li>
						</ul>
					</div>
					<div class="myOrder-leftSide-serviceafter">
						<div class="myOrder-leftSide-serviceafter-title">售后服务</div>
						<div class="myOrder-leftSide-serviceafter-return-goods">
							<a href=""> 退货</a>
						</div>
					</div>
					<div class="myOrder-leftSide-center">
						<ul class="myOrder-leftSide-center-list">
							<li class="myOrder-leftSide-center-list-title">个人中心</li>
							<li>
								<a href="">我的优惠券</a>
							</li>
							<li>
								<a href=""> 我的余额</a>
							</li>
							<li>
								<a href="myOrder-favourate.html"> 喜欢的商品</a>
							</li>
							<li>
								<a href="myOrder-message.html"> 我的消息</a>
							</li>
						</ul>
					</div>

					<div class="myOrder-leftSide-center">
						<ul class="myOrder-leftSide-center-list">
							<li class="myOrder-leftSide-center-list-title">账户管理</li>
							<li>
								<a href="myorder-changepassword.html">修改密码</a>
							</li>
							<li>
								<a href="myOrder-manaddr.html"> 收货地址管理</a>
							</li>

						</ul>
					</div>
				</div>
				<div class="myOrder-rightSide like">
					喜欢的商品
					<div class="myOrder-favourate">
						
					</div>
				</div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/alertLogin.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/addheader.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("body").addHeader()

			var thisid = $.cookie("userId")
			//var thisid1 = $.cookie("goodsid")
			//var thisid1 = getQueryParams("goodsid")
			//获取cookie，将userID转化为对象
			//  var userid = JSON.parse($.cookie("userid")).id
 //查询喜欢的商品
			$.get('/goodslike', {
				userid: thisid
			}, function(data) {
				
				data.forEach(function(item) {
					
					$(".myOrder-favourate").append(`
						<div class="myOrder-favourate-div1">
				<li class="myOrder-favourate-img"><img src="${item.img}" />
				<div class="myOrder-favourate-unitprice">${item.unitPrice}.00元<span class="myOrder-favourate-oldprice">${item.oldPrice}.00元</span></div>
				
				<div class="myOrder-favourate-name">${item.title}</div></li>
				<div class="myOrder-favourate-botnbox">
				   <div class="myOrder-favourate-delete" data-id=${item.id}>删除</div>
				   <div class="myOrder-favourate-look"><a href="DetailPages.html?id=${item.id}">查看详情</a></div>
			    </div>
				       </div>
				`)
				})

			})
              //删除喜欢的商品
			$(".myOrder-favourate").on("click", ".myOrder-favourate-delete", function() {
				
				$.post('/goodslikedel', {
					userid: thisid,
					goodsid: $(this).data("id")
				},function(data) {
					alert(data.msg)
					
					$(".myOrder-favourate-div1").remove()
					location.reload()
				})
			})
		</script>
	</body>

</html>